<template>
    <div id="MyIndexTop-Nav">
        <div id="MyIndexTop-Nav-Content">
            <div id="Top">
                <span class="iconfont icon-sdf" @click="GoMy()"></span>
                <p>
                    <span class="iconfont icon-saoyisaoerweima"></span>
                    <span class="iconfont icon-fenxiang"></span>
                </p>
            </div>
            <div id="Bootom">
                <span class="iconfont icon-sdf" @click="GoMy()"></span>
                <span class="iconfont icon-fenxiang"></span>
            </div>
        </div>
    </div>
</template>

<script>
    window.onscroll = function () {
        let _top = document.body.scrollTop || document.documentElement.scrollTop;//滚动的距离
        if (_top >= 50) {
            //  console.log(document.documentElement.scrollTop);
            document.querySelector("#Top").style.top = "0rem";
            // console.log(document.querySelector("#Top").style.top)
        } else {
            document.querySelector("#Top").style.top = "-0.56rem";
            // console.log(document.querySelector("#Top").style.top)
        }
    }
    export default {
        name: "MyIndex-Nav",
        methods: {
            GoMy() {
                this.$router.go(-1);
            },
        }
    }
</script>

<style lang="scss" scoped>
    #MyIndexTop-Nav-Content {

        #Top {
            width: 100%;
            position: fixed;
            top: -0.56rem;
            z-index: 5;
            background-color: #e0e0e0;

        }

        #Bootom {
        }

        div {
            width: 100%;
            padding: 0.15rem 0.14rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            p {
                span:nth-of-type(1) {
                    margin-right: 0.17rem;
                }
            }
        }

        span {
            font-size: 0.22rem;
            color: #FFFFFF;
        }
    }
</style>